<template>
  <section class="pui-container" :class="{ 'is-vertical': isVertical, flexDirection }">
    <slot></slot>
  </section>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'pui-container',
});
</script>

<script setup lang="ts">
import { ref, computed, useSlots, VNode, Component } from 'vue';
import type { Props } from './interface';

const props = withDefaults(defineProps<Props>(), {
  direction: 'vertical',
});

//默认水平布局
const flexDirection = ref('row');

const isVertical = computed(() => {
  const slots = useSlots();
  if (slots && slots.default) {
    slots.default().forEach((vn: VNode) => {
      const component = vn.type as Component;
      //若有header元素则改为垂直布局
      if (component.name === 'PuiHeader' || component.name === 'PuiFooter') {
        flexDirection.value = 'column';
      }
    });
  }
  if (props.direction === 'vertical') {
    //垂直方向排列
    flexDirection.value = 'column';
    return true;
  } else if (props.direction === 'horizontal') {
    return false;
  }
  return false;
});
</script>
